import React, { useState, useRef, useEffect } from 'react';
import style from "./EasingAnimation.module.css";
// 缓动动画

function EasingAnimation() {
    //行          盒子下标
    const [hoveredIndex, setHoveredIndex] = useState({ row: null, index: null });
    const boxes = useRef([]);
    //状态
    // const [showContent, setShowContent] = useState(false);

    useEffect(() => {
        // 在组件挂载后获取所有AnimationBox的引用  
        boxes.current = document.querySelectorAll(`.${style.AnimationBox}`);

        // 清理函数，在组件卸载时执行  
        return () => {
            boxes.current = [];
        };
    }, []);

    // 鼠标滑入
    const handleMouseOver = (row: any, index: any) => {
        // setShowContent(true)
        setHoveredIndex({ row, index });  //  0 0  0 1  0 2 //1 0 1 1 1 2
    };

    // 鼠标滑出
    const handleMouseOut = () => {
        setHoveredIndex({ row: null, index: null });
    };

    useEffect(() => {
        // 根据hoveredIndex改变所有AnimationBox的宽度  
        if (hoveredIndex.row !== null) {
            const startIndex = hoveredIndex.row * 3; // 每行3个盒子   0  1  行
            boxes.current.forEach((box, index) => {
                const boxRow = Math.floor(index / 3); // 计算当前盒子所在的行 0   1
                if (boxRow === hoveredIndex.row) { //滑入那行0==0
                    // 表示鼠标悬停的盒子的实际索引（通常是行起始索引加上列索引）
                    if (index !== startIndex + hoveredIndex.index) {
                        box.style.width = '25%'; // 其他盒子的宽度
                    } else {
                        box.style.width = '48%'; // 当前滑入的盒子的宽度
                    }
                }
                // 不是滑入那行的宽度
                else {
                    box.style.width = '32%';
                }
            });
        } else {
            // 重置所有盒子的宽度  
            boxes.current.forEach(box => {
                box.style.width = ''; // 恢复CSS中定义的原始宽度
            });
        }
    }, [hoveredIndex]);

    return (
        <div className={style.easing}>
            {Array.from({ length: 6 }, (_, index) => {
                const row = Math.floor(index / 3); // 向下取整 前三个是0行  后三个是1行
                const col = index % 3; // 计算当前盒子在行中的位置  取余数
                return (
                    <div
                        className={style.AnimationBox}
                        onMouseOver={() => handleMouseOver(row, col)}
                        // onMouseOut={handleMouseOut}
                        key={index}
                    >
                        <div className={style.show} style={{ opacity: hoveredIndex.row === row && hoveredIndex.index === col ? 0 : 1 }}>
                            {index === 0 ?
                                <div className={style.showone}>
                                    <div className={style.h1}>01</div>
                                    <h4>创意供给</h4>
                                    <h3>创意无法及时满足
                                        <br />
                                        高频个性化需求？
                                    </h3>
                                </div>
                                :
                                index === 1 ?
                                    <div className={style.showone}>
                                        <div className={style.h1}>02</div>
                                        <h4>内容生产</h4>
                                        <h3>如何用设计工具提
                                            <br />
                                            升内容生产效率
                                        </h3>
                                    </div> :
                                    index === 2 ?
                                        <div className={style.showone}>
                                            <div className={style.h1}>03</div>
                                            <h4>资产管理</h4>
                                            <h3>创意无法及时满足
                                                <br />
                                                高频个性化需求？
                                            </h3>
                                        </div> :
                                        index === 3 ?
                                            <div className={style.showone}>
                                                <div className={style.h1}>04</div>
                                                <h4>营销应用</h4>
                                                <h3>创意无法及时满足
                                                    <br />
                                                    高频个性化需求？
                                                </h3>
                                            </div> :
                                            index === 4 ?
                                                <div className={style.showone}>
                                                    <div className={style.h1}>05</div>
                                                    <h4>效果监测</h4>
                                                    <h3>如何借助数据
                                                        <br />
                                                        反哺内容优化
                                                    </h3>
                                                </div> :
                                                index === 5 ?
                                                    <div className={style.showone}>
                                                        <div className={style.h1}>06</div>
                                                        <h4>系统定制</h4>
                                                        <h3>企业个性化
                                                            <br />
                                                            如何满足?
                                                        </h3>
                                                    </div> :
                                                    ''}
                        </div>
                        <div className={style.hide} style={{ opacity: hoveredIndex.row === row && hoveredIndex.index === col ? 1 : 0 }}>
                            {index === 0 ?
                                <div className={style.hideone}>
                                    <h3>创意供给：海量需求及时满足</h3>
                                    <div className={style.hidetitle}>
                                        搞定旗下花瓣、专业定制设计团队、为企业提供多样内容
                                    </div>
                                    <div>
                                        <div className={style.hidemain}>
                                            <img src="https://cdn.dancf.com/fe-assets/20231121/assets/9220848db02dc7fc8efbe325bfded7f1.png" alt="" />
                                            <p>定制设计</p>
                                            <div>量身打造战术方案</div>
                                        </div>
                                        <div className={style.hidemain}>
                                            <img src="https://cdn.dancf.com/fe-assets/20231121/assets/5e6e680fe476952a63bb6855e39230a6.png" alt="" />
                                            <p>花瓣</p>
                                            <div>版权素材一键应用</div>
                                        </div>
                                        <div className={style.hidemain}>
                                            <img src="https://cdn.dancf.com/fe-assets/20231121/assets/30c2ad93b065c6207c489a0fea1fcd67.png" alt="" />
                                            <p>卡神</p>
                                            <div>智能商品图拍摄</div>
                                        </div>
                                    </div>
                                </div> :
                                index === 1 ?
                                    <div className={style.hideone}>
                                        <h3>内容生产：创作效率不断提升</h3>
                                        <div className={style.hidetitle}>
                                            搞定旗下花瓣、专业定制设计团队、为企业提供多样内容
                                        </div>
                                        <div>
                                            <div className={style.hidemain}>
                                                <img src="https://cdn.dancf.com/fe-assets/20231121/assets/9220848db02dc7fc8efbe325bfded7f1.png" alt="" />
                                                <p>定制设计</p>
                                                <div>量身打造战术方案</div>
                                            </div>
                                            <div className={style.hidemain}>
                                                <img src="https://cdn.dancf.com/fe-assets/20231121/assets/23f9fe59e96ebc5fee4be4e88ca282c6.png" alt="" />
                                                <p>花瓣</p>
                                                <div>版权素材一键应用</div>
                                            </div>
                                            <div className={style.hidemain}>
                                                <img src="https://cdn.dancf.com/fe-assets/20231121/assets/30c2ad93b065c6207c489a0fea1fcd67.png" alt="" />
                                                <p>卡神</p>
                                                <div>智能商品图拍摄</div>
                                            </div>
                                        </div>
                                    </div> :
                                    index === 2 ?
                                        <div className={style.hideone}>
                                            <h3>资产管理:盘活企业内容资产价值</h3>
                                            <div className={style.hidetitle}>
                                                搞定旗下花瓣、专业定制设计团队、为企业提供多样内容
                                            </div>
                                            <div>
                                                <div className={style.hidemain}>
                                                    <img src="https://cdn.dancf.com/fe-assets/20231121/assets/9220848db02dc7fc8efbe325bfded7f1.png" alt="" />
                                                    <p>定制设计</p>
                                                    <div>量身打造战术方案</div>
                                                </div>
                                                <div className={style.hidemain}>
                                                    <img src="https://cdn.dancf.com/fe-assets/20231121/assets/1d6cdf22b313293be135717c376e3a47.png" alt="" />
                                                    <p>花瓣</p>
                                                    <div>版权素材一键应用</div>
                                                </div>
                                                <div className={style.hidemain}>
                                                    <img src="https://cdn.dancf.com/fe-assets/20231121/assets/30c2ad93b065c6207c489a0fea1fcd67.png" alt="" />
                                                    <p>卡神</p>
                                                    <div>智能商品图拍摄</div>
                                                </div>
                                            </div>
                                        </div> :
                                        index === 3 ?
                                            <div className={style.hideone}>
                                                <h3>营销应用:效率与效果双重保障</h3>
                                                <div className={style.hidetitle}>
                                                    搞定旗下花瓣、专业定制设计团队、为企业提供多样内容
                                                </div>
                                                <div>
                                                    <div className={style.hidemain}>
                                                        <img src="https://cdn.dancf.com/fe-assets/20231121/assets/9220848db02dc7fc8efbe325bfded7f1.png" alt="" />
                                                        <p>定制设计</p>
                                                        <div>量身打造战术方案</div>
                                                    </div>
                                                    <div className={style.hidemain}>
                                                        <img src="https://cdn.dancf.com/fe-assets/20231121/assets/489217a19ba0938038b3f15afa75745a.png" alt="" />
                                                        <p>花瓣</p>
                                                        <div>版权素材一键应用</div>
                                                    </div>
                                                    <div className={style.hidemain}>
                                                        <img src="https://cdn.dancf.com/fe-assets/20231121/assets/30c2ad93b065c6207c489a0fea1fcd67.png" alt="" />
                                                        <p>卡神</p>
                                                        <div>智能商品图拍摄</div>
                                                    </div>
                                                </div>
                                            </div> :
                                            index === 4 ?
                                                <div className={style.hideone}>
                                                    <h3>效果监测:多维数据让营销更有谱</h3>
                                                    <div className={style.hidetitle}>
                                                        搞定旗下花瓣、专业定制设计团队、为企业提供多样内容
                                                    </div>
                                                    <div>
                                                        <div className={style.hidemain}>
                                                            <img src="https://cdn.dancf.com/fe-assets/20231121/assets/9220848db02dc7fc8efbe325bfded7f1.png" alt="" />
                                                            <p>定制设计</p>
                                                            <div>量身打造战术方案</div>
                                                        </div>
                                                        <div className={style.hidemain}>
                                                            <img src="https://cdn.dancf.com/fe-assets/20231121/assets/3e4713e87ad4120513e3b4df30331bfc.png" alt="" />
                                                            <p>花瓣</p>
                                                            <div>版权素材一键应用</div>
                                                        </div>
                                                        <div className={style.hidemain}>
                                                            <img src="https://cdn.dancf.com/fe-assets/20231121/assets/30c2ad93b065c6207c489a0fea1fcd67.png" alt="" />
                                                            <p>卡神</p>
                                                            <div>智能商品图拍摄</div>
                                                        </div>
                                                    </div>
                                                </div> :
                                                index === 5 ?
                                                    <div className={style.hideone}>
                                                        <h3>系统定制:打造企业专属内容中台</h3>
                                                        <div className={style.hidetitle}>
                                                            搞定旗下花瓣、专业定制设计团队、为企业提供多样内容
                                                        </div>
                                                        <div>
                                                            <div className={style.hidemain}>
                                                                <img src="https://cdn.dancf.com/fe-assets/20231121/assets/9220848db02dc7fc8efbe325bfded7f1.png" alt="" />
                                                                <p>定制设计</p>
                                                                <div>量身打造战术方案</div>
                                                            </div>
                                                            <div className={style.hidemain}>
                                                                <img src="https://cdn.dancf.com/fe-assets/20231121/assets/52e8ec4c0d43a736e7b91c4aebf16a3d.png" alt="" />
                                                                <p>花瓣</p>
                                                                <div>版权素材一键应用</div>
                                                            </div>
                                                            <div className={style.hidemain}>
                                                                <img src="https://cdn.dancf.com/fe-assets/20231121/assets/30c2ad93b065c6207c489a0fea1fcd67.png" alt="" />
                                                                <p>卡神</p>
                                                                <div>智能商品图拍摄</div>
                                                            </div>
                                                        </div>
                                                    </div> :
                                                    ''}
                        </div>

                    </div>
                );
            })}
        </div>
    );
}

export default EasingAnimation;
